﻿@page "/Reboot"

<PageTitle>@App.PageTitle("Reboot")</PageTitle>

<h1><FluentIcon Value="@(new Icons.Regular.Size24.ArrowReset())" /> Reboot CSS</h1>

<p>
    Reboot is a collection of element-specific CSS changes in a single file to help kickstart building a site with the Fluent UI Blazor library. 
    It provides an elegant, consistent, and simple baseline to build upon (inspired by Bootstrap's Reboot which again is based on Normalize.css)
</p>
<p>
    If you want to use Reboot, like this demo site, you'll need to include it in your <code>App.razor</code> or <code>index.html</code> file like this:
<CodeSnippet Language="language-html">&lt;link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /&gt;</CodeSnippet>
    If you are creating a site by using our <a href="/Templates">Templates</a> package, this is already set up for you. You can 
    <FluentAnchor Appearance=Appearance.Hypertext Href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" Download="reboot.css">download the file</FluentAnchor> 
    to see what's inside.
</p>
<p>
    PS: It is entirely possible to build a site <b>without using Reboot</b> but you will have to do more styling yourself.
</p>

<h2 id="approach">Approach <a class="anchor-link" href="#approach" aria-label="Link to this section: Approach"></a></h2>
<p>Reboot builds upon Bootstrap's Reboot which itself  builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. </p>
<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>
<ul>
    <li>Update some browser default values to use <code>rem</code>s instead of <code>em</code>s for scalable component spacing.</li>
    <li>Avoid <code>margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code>margin</code> is a simpler mental model.</li>
    <li>For easier scaling across device sizes, block elements should use <code>rem</code>s for <code>margin</code>s.</li>
    <li>Keep declarations of <code>font</code>-related properties to a minimum, using <code>inherit</code> whenever possible.</li>
</ul>

<h2 id="page-defaults">Page defaults <a class="anchor-link" href="#page-defaults" aria-label="Link to this section: Page defaults"></a></h2>
<p>The <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> elements are updated to provide better page-wide defaults. More specifically:</p>
<ul>
    <li>
        The <code>box-sizing</code> is globally set on every element—including <code>*::before</code> and <code>*::after</code>, to <code>border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.
        <ul>
            <li>No base <code>font-size</code> is declared on the <code>&lt;html&gt;</code>, but <code>--type-ramp-base-font-size: 14px;</code> is assumed (the Fluent UI default). <code>font-size: var(--type-ramp-base-font-size)</code> is applied on the <code>&lt;body&gt;</code> and can be overridden by modifying the <code>--type-ramp-base-font-size</code> variable.</li>
        </ul>
    </li>
    <li>The <code>&lt;body&gt;</code> also sets a global <code>font-family</code> (<code>var(--body-font)</code>), <code>font-weight</code> (<code>var(--font-weight)</code>), <code>line-height</code> (<code>var(--type-ramp-base-font-size)</code>), and <code>color</code> (<code>var(--neutral-base-color);</code>). This is inherited later by some form elements to prevent font inconsistencies.</li>
    <li>For safety, the <code>&lt;body&gt;</code> has a declared <code>background-color</code>, defaulting to <code>var(--neutral-fill-layer-rest)</code>.</li>
</ul>

<h2 id="headings-and-paragraphs">Headings and paragraphs <a class="anchor-link" href="#headings-and-paragraphs" aria-label="Link to this section: Headings and paragraphs"></a></h2>
<p>All heading elements—e.g., <code>&lt;h1&gt;</code>—and <code>&lt;p&gt;</code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Heading</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>&lt;h1&gt;&lt;/h1&gt;</code></td>
                <td><h1>h1. Fluent UI heading</h1></td>
            </tr>
            <tr>
                <td><code>&lt;h2&gt;&lt;/h2&gt;</code></td>
                <td><h2>h2. Fluent UI heading</h2></td>
            </tr>
            <tr>
                <td><code>&lt;h3&gt;&lt;/h3&gt;</code></td>
                <td><h3>h3. Fluent UI heading</h3></td>
            </tr>
            <tr>
                <td><code>&lt;h4&gt;&lt;/h4&gt;</code></td>
                <td><h4>h4. Fluent UI heading</h4></td>
            </tr>
            <tr>
                <td><code>&lt;h5&gt;&lt;/h5&gt;</code></td>
                <td><h4>h5. Fluent UI heading</h4></td>
            </tr>
            <tr>
                <td><code>&lt;h6&gt;&lt;/h6&gt;</code></td>
                <td><h6>h6. Fluent UI heading</h6></td>
            </tr>
        </tbody>
    </table>
</div>

<h2 id="lists">Lists <a class="anchor-link" href="#lists" aria-label="Link to this section: Lists"></a></h2>
<p>All lists—<code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, and <code>&lt;dl&gt;</code>—have their <code>margin-top</code> removed and a <code>margin-bottom: 1rem</code>. Nested lists have no <code>margin-bottom</code>. We&rsquo;ve also reset the <code>padding-left</code> on <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> elements.</p>
<div class="reboot-example">
    <ul>
        <li>All lists have their top margin removed</li>
        <li>And their bottom margin normalized</li>
        <li>
            Nested lists have no bottom margin
            <ul>
                <li>This way they have a more even appearance</li>
                <li>Particularly when followed by more list items</li>
            </ul>
        </li>
        <li>The left padding has also been reset</li>
    </ul>
    <ol>
        <li>Here&rsquo;s an ordered list</li>
        <li>With a few list items</li>
        <li>It has the same overall look</li>
        <li>As the previous unordered list</li>
    </ol>

</div>
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code>margin</code>s. <code>&lt;dd&gt;</code>s reset <code>margin-left</code> to <code>0</code> and add <code>margin-bottom: .5rem</code>. <code>&lt;dt&gt;</code>s are <strong>bolded</strong>.</p>
<div class="reboot-example">
    <dl>
        <dt>Description lists</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Term</dt>
        <dd>Definition for the term.</dd>
        <dd>A second definition for the same term.</dd>
        <dt>Another term</dt>
        <dd>Definition for this other term.</dd>
    </dl>
</div>
<h2 id="inline-code">Inline code <a class="anchor-link" href="#inline-code" aria-label="Link to this section: Inline code"></a></h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>. Be sure to escape HTML angle brackets.</p>
<div class="reboot-example">
    <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
</div>
<h2 id="code-blocks">Code blocks <a class="anchor-link" href="#code-blocks" aria-label="Link to this section: Code blocks"></a></h2>
<p>Use <code>&lt;pre&gt;</code>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The <code>&lt;pre&gt;</code> element is reset to remove its <code>margin-top</code> and use <code>rem</code> units for its <code>margin-bottom</code>.</p>
<div class="reboot-example">
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>
</div>

<h2 id="variables">Variables <a class="anchor-link" href="#variables" aria-label="Link to this section: Variables"></a></h2>
<p>For indicating variables use the <code>&lt;var&gt;</code> tag.</p>
<div class="reboot-example">
    <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
</div>

<h2 id="user-input">User input <a class="anchor-link" href="#user-input" aria-label="Link to this section: User input"></a></h2>
<p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
<div class="reboot-example">
    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>

<h2 id="sample-output">Sample output <a class="anchor-link" href="#sample-output" aria-label="Link to this section: Sample output"></a></h2>
<p>For indicating sample output from a program use the <code>&lt;samp&gt;</code> tag.</p>

<samp>This text is meant to be treated as sample output from a computer program.</samp>

<h2 id="tables">Tables <a class="anchor-link" href="#tables" aria-label="Link to this section: Tables"></a></h2>
<p>Tables are slightly adjusted to style <code>&lt;caption&gt;</code>s, collapse borders, and ensure consistent <code>text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/5.2/content/tables/">the <code>.table</code> class</a>.</p>
<div class="reboot-example">
    <table>
        <caption>
            This is an example table, and this is its caption to describe the contents.
        </caption>
        <thead>
            <tr>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>

<h2 id="forms">Forms <a class="anchor-link" href="#forms" aria-label="Link to this section: Forms"></a></h2>
<p>
    To maintain a consistent look and feel, we stongly advise you to use the Fluent Input components as described in the 
    <a href="/Forms">Form & inputs</a> section. It is however also still possible of course to use the standard HTML input components. Most of them 
    have been rebooted for simpler base styles. Here are some of the most notable changes:</p>
<ul>
    <li><code>&lt;fieldset&gt;</code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li>
    <li><code>&lt;legend&gt;</code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
    <li><code>&lt;label&gt;</code>s are set to <code>display: inline-block</code> to allow <code>margin</code> to be applied.</li>
    <li><code>&lt;input&gt;</code>s, <code>&lt;select&gt;</code>s, <code>&lt;textarea&gt;</code>s, and <code>&lt;button&gt;</code>s are mostly addressed by Normalize, but Reboot removes their <code>margin</code> and sets <code>line-height: inherit</code>, too.</li>
    <li><code>&lt;textarea&gt;</code>s are modified to only be resizable vertically as horizontal resizing often &ldquo;breaks&rdquo; page layout.</li>
    <li><code>&lt;button&gt;</code>s and <code>&lt;input&gt;</code> button elements have <code>cursor: pointer</code> when <code>:not(:disabled)</code>.</li>
</ul>
<p>These changes, and more, are demonstrated below.</p>
<div class="reboot-example">
    <form>
        <fieldset>
            <legend>Example legend</legend>
            <p>
                <label for="input">Example input</label>
                <input type="text" id="input" placeholder="Example input">
            </p>
            <p>
                <label for="email">Example email</label>
                <input type="email" id="email" placeholder="test@example.com">
            </p>
            <p>
                <label for="tel">Example telephone</label>
                <input type="tel" id="tel">
            </p>
            <p>
                <label for="url">Example url</label>
                <input type="url" id="url">
            </p>
            <p>
                <label for="number">Example number</label>
                <input type="number" id="number">
            </p>
            <p>
                <label for="search">Example search</label>
                <input type="search" id="search">
            </p>
            <p>
                <label for="range">Example range</label>
                <input type="range" id="range" min="0" max="10">
            </p>
            <p>
                <label for="file">Example file input</label>
                <input type="file" id="file">
            </p>
            <p>
                <label for="select">Example select</label>
                <select id="select">
                    <option value="">Choose...</option>
                    <optgroup label="Option group 1">
                        <option value="">Option 1</option>
                        <option value="">Option 2</option>
                        <option value="">Option 3</option>
                    </optgroup>
                    <optgroup label="Option group 2">
                        <option value="">Option 4</option>
                        <option value="">Option 5</option>
                        <option value="">Option 6</option>
                    </optgroup>
                </select>
            </p>
            <p>
                <label>
                    <input type="checkbox" value="">
                    Check this checkbox
                </label>
            </p>
            <p>
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    Option one is this and that
                </label>
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
                </label>
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                    Option three is disabled
                </label>
            </p>
            <p>
                <label for="textarea">Example textarea</label>
                <textarea id="textarea" rows="3"></textarea>
            </p>
            <p>
                <label for="date">Example date</label>
                <input type="date" id="date">
            </p>
            <p>
                <label for="time">Example time</label>
                <input type="time" id="time">
            </p>
            <p>
                <label for="password">Example password</label>
                <input type="password" id="password">
            </p>
            <p>
                <label for="datetime-local">Example datetime-local</label>
                <input type="datetime-local" id="datetime-local">
            </p>
            <p>
                <label for="week">Example week</label>
                <input type="week" id="week">
            </p>
            <p>
                <label for="month">Example month</label>
                <input type="month" id="month">
            </p>
            <p>
                <label for="color">Example color</label>
                <input type="color" id="color">
            </p>
            <p>
                <label for="output">Example output</label>
                <output name="result" id="output">100</output>
            </p>
            <p>
                <button type="submit">Button submit</button>
                <input type="submit" value="Input submit button">
                <input type="reset" value="Input reset button">
                <input type="button" value="Input button">
            </p>
            <p>
                <button type="submit" disabled>Button submit</button>
                <input type="submit" value="Input submit button" disabled>
                <input type="reset" value="Input reset button" disabled>
                <input type="button" value="Input button" disabled>
            </p>
        </fieldset>
    </form>
</div>
<blockquote>
    <h5 id="date--color-input-support">Date &amp; color input support <a class="anchor-link" href="#date--color-input-support" aria-label="Link to this section: Date &amp; color input support"></a></h5>
    <p>Keep in mind date inputs are <a href="https://caniuse.com/input-datetime">not fully supported</a> by all browsers, namely Safari.</p>
</blockquote>

<h3 id="pointers-on-buttons">Pointers on buttons <a class="anchor-link" href="#pointers-on-buttons" aria-label="Link to this section: Pointers on buttons"></a></h3>
<p>Reboot includes an enhancement for <code>role=&quot;button&quot;</code> to change the default cursor to <code>pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn&rsquo;t necessary for <code>&lt;button&gt;</code> elements, which get their own <code>cursor</code> change.</p>
<div class="reboot-example">
    <span role="button" tabindex="0">Non-button element button</span>
</div>
<h2 id="misc-elements">Misc elements <a class="anchor-link" href="#misc-elements" aria-label="Link to this section: Misc elements"></a></h2>
<h3 id="address">Address <a class="anchor-link" href="#address" aria-label="Link to this section: Address"></a></h3>
<p>The <code>&lt;address&gt;</code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code>&lt;address&gt;</code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code>&lt;br&gt;</code>.</p>
<div class="reboot-example">
    <address>
        <strong>Microsoft Corporation</strong><br>
        1 Microsoft Way<br>
        Redmond, WA 98052<br>
        <abbr title="Phone">P:</abbr> (425) 882-8080
    </address>
    <address>
        <strong>Full Name</strong><br>
        <a href="mailto:first.last@example.com">first.last@example.com</a>
    </address>
</div>
<h3 id="blockquote">Blockquote <a class="anchor-link" href="#blockquote" aria-label="Link to this section: Blockquote"></a></h3>
<p>The default <code>margin</code> on blockquotes is <code>1em 40px</code>.</p>
<div class="reboot-example">
    <blockquote class="blockquote">
        A well-known quote, contained in a blockquote element.
    </blockquote>
    <p>Someone famous in <cite title="Source Title">Source Title</cite></p>
</div>
<h3 id="inline-elements">Inline elements <a class="anchor-link" href="#inline-elements" aria-label="Link to this section: Inline elements"></a></h3>
<p>The <code>&lt;abbr&gt;</code> element receives basic styling to make it stand out amongst paragraph text.</p>
<div class="reboot-example">
    The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
</div>
<h3 id="summary">Summary <a class="anchor-link" href="#summary" aria-label="Link to this section: Summary"></a></h3>
<p>The default <code>cursor</code> on summary is <code>text</code>, so we reset that to <code>pointer</code> to convey that the element can be interacted with by clicking on it.</p>
<div class="reboot-example">
    <details>
        <summary>Some details</summary>
        <p>More info about the details.</p>
    </details>
    <details open>
        <summary>Even more details</summary>
        <p>Here are even more details about the details.</p>
    </details>
</div>
<h3 id="html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute <a class="anchor-link" href="#html5-hidden-attribute" aria-label="Link to this section: HTML5 [hidden] attribute"></a></h3>
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code>[hidden]</code></a>, which is styled as <code>display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code>[hidden] { display: none !important; }</code> to help prevent its <code>display</code> from getting accidentally overridden.</p>
<div class="highlight">
    <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">hidden</span><span class="p">&gt;</span>
</span></span></code></pre>
</div>

